<style lang="less">
.upload-image .el-upload--picture-card {
  background: transparent;
  .el-icon-plus {
    color: #fff;
  }
}
</style>
<template>
  <div class="comp-new">
    <el-form ref="newForm" :model="newForm" :label-width="150 + 'px'">
      <el-form-item
        label="证书名称："
        prop="name"
        :rules="[{ required: true, message: '请输入证书名称' }]"
      >
        <el-input placeholder="请输入" v-model.trim="newForm.name"></el-input>
      </el-form-item>
      <el-form-item
        label="证书编号："
        prop="number"
        :rules="[{ required: true, message: '请输入证书编号' }]"
      >
        <el-input placeholder="请输入" v-model.trim="newForm.number"></el-input>
      </el-form-item>
      <el-form-item
        label="证书类型："
        prop="type"
        :rules="[{ required: true, message: '请选择证书类型' }]"
      >
        <el-select v-model="newForm.type">
          <el-option
            placeholder="请选择"
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="初领日期："
        prop="initialDate"
        :rules="[{ required: true, message: '请输入初领日期' }]"
      >
        <el-date-picker
          v-model="newForm.initialDate"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="请选择"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="到期日期："
        prop="dueDate"
        :rules="[{ required: true, message: '请输入到期日期' }]"
      >
        <el-date-picker
          v-model="newForm.dueDate"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="请选择"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="复审日期："
        prop="reviewDate"
      >
        <el-date-picker
          v-model="newForm.reviewDate"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="请选择"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapState } from "vuex";
import Location from "@/components/census/record/Location.vue";
export default {
  name: "newEquipment",
  components: {
    Location,
  },
  props: {
    activeData: {
      type: Object,
      default() {
        return null;
      },
    },
    unit: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    ...mapState(["siteInfos"]),
    coord() {
      if (this.newForm.lon) {
        return this.newForm.lon + "," + this.newForm.lat;
      }
    },
  },
  watch: {
    activeData() {
      this.initForm();
    },
  },
  data() {
    return {
      newForm: {},
      typeList: [
        {
          name: "人员证书",
          id: "1",
        },
        {
          name: "设备设施",
          id: "2",
        },
        {
          name: "第三方检验",
          id: "3",
        },
        {
          name: "行业资质",
          id: "4",
        },
        {
          name: "标准化达标",
          id: "5",
        },
      ],
    };
  },
  created() {
    this.initForm();
  },
  watch: {
    $route(to, from) {},
  },
  methods: {
    initForm() {
      if (this.activeData) {
        this.newForm = this.activeData;
      } else {
        this.newForm.businessId = this.unit.id;
        this.newForm.businessName = this.unit.name;
      }
    },

    locateAction() {
      this.locationModalVisible = true;
    },
    saveLocation(coord) {
      this.newForm.lon = coord[0];
      this.newForm.lat = coord[1];
      this.locationModalVisible = false;
    },

    submitAction() {
      this.$refs["newForm"].validate((valid) => {
        if (valid) {
          this.$post(
            "/business/business/addOrUpdateCertificate",
            this.newForm
          ).then(
            (res) => {
              this.loading = false;
              this.$message.success("保存成功");
              this.$emit("success");
            },
            (err) => {
              if (err.msg) {
                this.$message.error(err.msg);
              }
            }
          );
        } else {
          return false;
        }
      });
    },
    cancelAction() {
      this.$emit("cancel");
    },
  },
};
</script>
